<script>
export default {
    props: ["value", "unit", "zhegnshu"],
    methods: {
        change(e) {
            if (this.zhegnshu) {
                this.$emit('input', e.target.value < 0 ? 0 : (+e.target.value).toFixed());
                this.$forceUpdate();
            } else {
                this.$emit('input', e.target.value <0 ? 0 : e.target.value);
            }
        },
        increment() {
            this.$emit('input', (Number(this.value) + 1).toFixed());
        },
        decrement() {
            if (Number(this.value) <= 0) return;
            this.$emit('input', +((Number(this.value)- 1) < 0 ? 0 : (Number(this.value)- 1)).toFixed(1));
        }
    }
}
</script>

<template>
    <div class="count">
        <div class="span" @click="decrement">
            <image src="/static/icon/c1.png" mode="widthFix" class="w-15"></image>
        </div>
        <div class="h-full flex">
            <input type="digit" :value="value" class="input h-full" :class="{ 'ml-45': unit }" @input="change">
            <div class="fz22 flex-shirnk-0" style="color:#999;min-width: 40rpx;" v-if="unit">{{ unit }}</div>
        </div>
        <div class="span" @click="increment">
            <image src="/static/icon/c2.png" mode="widthFix" class="w-15"></image>
        </div>
    </div>
</template>

<style lang="less">
.count {
    background-color: #F7F7F7;
    height: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300rpx;
    border-radius: 25rpx;
    overflow: hidden;

    .span {
        color: #1d1d1d;
        width: 100rpx;
        height: 50rpx;
        display: flex;
        background-color: #F3F3F3;
        align-items: center;
        justify-content: center;

        &:active {
            background-color: #ddd;
        }
    }

    .input {
        text-align: center;
        font-size: 28rpx;
    }
}
</style>